<template>
  <div class="app-container">
    <div class="search-container">
      <div class="search-wrap">
        <div style="display:inline-block;">
          <label class="radio-label" style="padding-left:0;">伪装IP地址: </label>
          <el-input v-model="fieldName" placeholder="" style="width:240px;" />
        </div>

        <div style="display:inline-block;">
          <label class="radio-label">伪装MAC地址: </label>
          <el-input v-model="fieldName" placeholder="" style="width:240px;" />
        </div>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-search">
          搜索
        </el-button>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="info" icon="el-icon-refresh-right">
          重置
        </el-button>
      </div>

      <div class="btn-wrap radio-label">
        <el-button
          :loading="downloadLoading"
          style="margin:0 0 20px 20px;"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="dialogTableVisible = true"
        >
          新增
        </el-button>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
      <el-table-column align="center" label="编号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="伪装IP地址">
        <template slot-scope="scope">
          {{ scope.row.ip }}
        </template>
      </el-table-column>
      <el-table-column label="伪装MAC地址">
        <template slot-scope="scope">
          {{ scope.row.mac }}
        </template>
      </el-table-column>
      <el-table-column label="子网掩码">
        <template slot-scope="scope">
          {{ scope.row.mask }}
        </template>
      </el-table-column>
      <el-table-column label="应用服务">
        <template slot-scope="scope">
          {{ scope.row.soft }}
        </template>
      </el-table-column>
      <el-table-column label="协议">
        <template slot-scope="scope">
          {{ scope.row.protocol }}
        </template>
      </el-table-column>
      <el-table-column label="端口">
        <template slot-scope="scope">
          {{ scope.row.port }}
        </template>
      </el-table-column>

      <el-table-column label="伪装指纹">
        <template slot-scope="scope">
          {{ scope.row.finger }}
        </template>
      </el-table-column>

      <el-table-column label="伪装蜜罐">
        <template slot-scope="scope">
          {{ scope.row.honeypot }}
        </template>
      </el-table-column>

      <el-table-column label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '关闭'" type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-else type="success">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="320" align="center">
        <template slot-scope="{row}">

          <el-button
            type="primary"
            size="mini"
            icon="el-icon-notebook-2"
            @click="dialogListVisible = true"
          >
            服务列表
          </el-button>

          <el-button
            type="warning"
            size="mini"
            icon="el-icon-edit"
          >
            修改
          </el-button>

          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>

      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
      />
    </div>

    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="新增伪装服务" width="1200px" @dragDialog="handleDrag">

      <div>
        <div class="step-wrap">
          <el-steps :active="stepNum" align-center>
            <el-step title="基本信息" />
            <el-step title="指纹服务" />
            <el-step title="蜜罐服务" />
          </el-steps>
        </div>
      </div>

      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px">
        <div v-if="stepNum == 1">
          <el-row>
            <el-col :span="24">
              <div class="form-title">基础配置</div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="伪装IP地址" prop="title">
                <el-input value="16.174.153.112" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="伪装MAC地址" prop="title">
                <el-input value="20-6A-8A-04-98-3A" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="子网掩码" prop="title">
                <el-input value="255.255.255.0" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="应用服务" prop="title">
                <el-input value="FTP网络管理系统" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="端口" prop="title">
                <el-input value="80" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="协议" prop="title">
                <el-select v-model="protocol" class="filter-item" size="medium" placeholder="请选择" clearable>
                  <el-option v-for="item in protocolOptions" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <div class="form-title">备注说明</div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-input
                v-model="ipListText"
                type="textarea"
                :rows="4"
              />
            </el-col>
          </el-row>
        </div>

        <div v-if="stepNum == 2">
          <el-row>
            <el-col :span="24">
              <div class="form-title">
                <span>指纹配置</span>
                <el-button style="margin-left: 30px;" type="primary" size="mini">选择指纹服务</el-button>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-table v-loading="listLoading" :data="formFingerList" element-loading-text="Loading..." fit highlight-current-row>
                <el-table-column align="center" label="编号" width="95">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="指纹IP" width="130">
                  <template slot-scope="scope">
                    {{ scope.row.ip }}
                  </template>
                </el-table-column>
                <el-table-column label="指纹服务">
                  <template slot-scope="scope">
                    {{ scope.row.server }}
                  </template>
                </el-table-column>
                <el-table-column label="运行状态" width="80px">
                  <template slot-scope="scope">
                    <el-tag type="success">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="150" align="center">
                  <template slot-scope="{row}">
                    <el-button
                      type="danger"
                      size="mini"
                    >
                      移除
                    </el-button>
                  </template>

                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>

        <div v-if="stepNum == 3">
          <el-row>
            <el-col :span="24">
              <div class="form-title">
                <span>蜜罐配置</span>
                <el-button style="margin-left: 30px;" type="primary" size="mini">选择蜜罐服务</el-button>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-table v-loading="listLoading" :data="formList" element-loading-text="Loading..." fit highlight-current-row>
                <el-table-column align="center" label="编号" width="95">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="蜜罐IP" width="130">
                  <template slot-scope="scope">
                    {{ scope.row.ip }}
                  </template>
                </el-table-column>
                <el-table-column label="蜜罐服务">
                  <template slot-scope="scope">
                    {{ scope.row.server }}
                  </template>
                </el-table-column>
                <el-table-column label="运行状态" width="80px">
                  <template slot-scope="scope">
                    <el-tag type="success">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="150" align="center">
                  <template slot-scope="{row}">
                    <el-button
                      type="danger"
                      size="mini"
                    >
                      移除
                    </el-button>
                  </template>

                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">
          取消
        </el-button>
        <el-button v-if="stepNum == 1" type="primary" plain @click="stepNum = 2">
          下一步
        </el-button>
        <el-button v-if="stepNum == 2" type="primary" plain @click="stepNum = 3">
          下一步
        </el-button>
        <el-button v-if="stepNum == 3" type="primary" @click="dialogTableVisible = false">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog class="detail-list-container" :visible.sync="dialogListVisible" title="详细列表" width="1200px">

      <div class="base-content">
        <el-row>
          <el-col :span="12">
            <span class="detail-title">蜜罐类型</span>
            <span class="detail-content">应用中间件</span>
          </el-col>

          <el-col :span="12">
            <span class="detail-title">伪装IP</span>
            <span class="detail-content">192.168.11.100</span>
          </el-col>
        </el-row>
      </div>

      <el-tabs v-model="activeTabName">
        <el-tab-pane label="指纹服务" name="finger">
          <div>
            <el-row>
              <el-col :span="24">
                <div class="form-title">
                  <span>指纹配置</span>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-table v-loading="listLoading" :data="formFingerDetailList" element-loading-text="Loading..." fit highlight-current-row>
                  <el-table-column align="center" label="编号" width="95">
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column label="指纹服务">
                    <template slot-scope="scope">
                      {{ scope.row.server }}
                    </template>
                  </el-table-column>
                  <el-table-column label="运行状态" width="80px">
                    <template slot-scope="scope">
                      <el-tag type="success">{{ scope.row.status }}</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="{row}">
                      <el-button
                        type="danger"
                        size="mini"
                      >
                        移除
                      </el-button>
                    </template>

                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="蜜罐服务" name="honeypot">
          <div>
            <el-row>
              <el-col :span="24">
                <div class="form-title">
                  <span>蜜罐配置</span>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-table v-loading="listLoading" :data="formDetailList" element-loading-text="Loading..." fit highlight-current-row>
                  <el-table-column align="center" label="编号" width="95">
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column label="蜜罐服务">
                    <template slot-scope="scope">
                      {{ scope.row.server }}
                    </template>
                  </el-table-column>
                  <el-table-column label="运行状态" width="80px">
                    <template slot-scope="scope">
                      <el-tag type="success">{{ scope.row.status }}</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="{row}">
                      <el-button
                        type="danger"
                        size="mini"
                      >
                        移除
                      </el-button>
                    </template>

                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import { parseTime } from '@/utils'

import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'Dynamic',
  components: { Pagination },
  directives: { elDragDialog },
  data() {
    return {
      stepNum: 1,
      list: null,
      fieldName: '',
      protocol: 'tcp',
      activeTabName: 'finger',
      ipListText: '伪装IP可以指定指纹和蜜罐',
      listLoading: true,
      downloadLoading: false,
      autoWidth: true,
      protocolOptions: ['tcp', 'udp'],
      scanTableData: [
        {
          no: 1,
          ip: '192.168.3.10',
          finger: 'Open ssl 2.1.7,Apache1.2.8',
          honeypot: 'Samba蜜罐、ftp蜜罐、ssh蜜罐、rdp蜜罐、telnet蜜罐、smtp蜜罐、dns蜜罐、mail蜜罐、proftpd蜜罐、stupid-ftp蜜罐…'
        },
        {
          no: 2,
          ip: '192.168.3.10',
          finger: 'Open ssl 2.1.7,Apache1.2.8',
          honeypot: 'OA蜜罐、CRM蜜罐、天融信上网行为管理系统蜜罐、天融信WAF系统蜜罐、天融信防火墙蜜罐、深信服上网行为管理系统蜜罐、深信服WAF系统蜜罐、深信服准入控制系统蜜罐、奇安信上网行为管理系统蜜罐、奇安信防火墙系统蜜罐、启明防火墙系统蜜罐、亚信防火墙蜜罐...'
        },
        {
          no: 3,
          ip: '192.168.3.10',
          finger: 'Open ssl 2.1.7,Apache1.2.8',
          honeypot: 'mssql蜜罐、mysql蜜罐、mongoDB蜜罐、postgre蜜罐、mariDB蜜罐、elasticsearch蜜罐、南大通用蜜罐、人大金仓蜜罐...'
        },
        {
          no: 4,
          ip: '192.168.3.10',
          finger: 'Open ssl 2.1.7,Apache1.2.8',
          honeypot: 'PHP蜜罐、tomcat蜜罐、weblogic蜜罐、java蜜罐、jenkins蜜罐、redis蜜罐、apache蜜罐、nginx蜜罐、iis蜜罐、hadoop蜜罐、memcache蜜罐、sol蜜罐r、activeMQ蜜罐、struts2蜜罐、wordpress蜜罐、ngin蜜罐x、jboss蜜罐、joomla蜜罐…'
        }
      ],

      formFingerDetailList: [
        {
          ip: '14.56.145.69',
          server: 'Huawei-Firewall 1.20.1',
          status: '运行中'
        }
      ],
      formDetailList: [
        {
          ip: '192.168.2.118',
          server: 'SSH蜜罐',
          status: '运行中'
        }
      ],
      formFingerList: [
        {
          ip: '14.56.145.69',
          server: 'IPFire,squarespace建站,Tncms,OpenMas,Amaya...',
          status: '运行中'
        },
        {
          ip: '192.168.2.118',
          server: 'NTLM认证,CISCO ASR,Servlet,Dell-Printer,SurgeFTP,BigDump,Basilic,AV-Arcade...',
          status: '运行中'
        },
        {
          ip: '25.18.27.98',
          server: 'BlueQuartz,Citrix-ConfProxy,cInvoice,cApexWEB,Brother-Printer,Cybozu-Garoon...',
          status: '运行中'
        }
      ],
      formList: [
        {
          ip: '192.168.2.118',
          server: 'SSH蜜罐,FTP蜜罐,MAIL蜜罐,SMB蜜罐...',
          status: '运行中'
        },
        {
          ip: '203.45.12.89',
          server: '天融信上网行为管理系统蜜罐,天融信防火墙蜜罐,深信服WAF系统蜜罐,奇安信防火墙系统蜜罐...',
          status: '运行中'
        }
      ],
      dialogTableVisible: false,
      dialogListVisible: false,

      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published'
      },
      hostOptions: ['28.12.125.74', '47.45.109.68', '12.16.84.57', '176.86.94.57', '175.116.180.77', '112.116.110.107', '182.16.10.8', '2.16.105.57', '182.161.122.77'],
      typeOptions: ['新建', '全网复制', '复制指纹', '复制蜜罐']
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const data = []
      fetchList().then(response => {
        data.push({
          ip: '192.168.1.100',
          mac: '00-1C-FQ-1D-A7-81',
          mask: '255.255.255.0',
          soft: 'HTTP',
          protocol: 'tcp',
          port: 80,
          status: '运行中',
          finger: 'Huawei-Firewall 1.20.1',
          honeypot: 'SSH蜜罐',
          desc: ''
        })
        data.push({
          ip: '82.17.112.40',
          mac: '00-30-18-A2-9C-57',
          mask: '255.255.255.0',
          soft: 'HTTPS',
          protocol: 'tcp',
          port: 443,
          status: '运行中',
          finger: 'epson打印机 3.6.7',
          honeypot: 'Nginx蜜罐',
          desc: ''
        })
        data.push({
          ip: '17.28.11.180',
          mac: '88-AE-1D-3R-24-00',
          mask: '255.255.255.0',
          soft: 'Spotify',
          protocol: 'udp',
          port: 223,
          status: '运行中',
          finger: 'Parker FTP',
          honeypot: 'SSH蜜罐',
          desc: ''
        })
        data.push({
          ip: '18.68.117.221',
          mac: '00-13-8F-DC-C9-45',
          mask: '255.255.255.0',
          soft: 'Ncat',
          protocol: 'udp',
          port: 808,
          status: '运行中',
          finger: 'mod_rails',
          honeypot: 'Apache蜜罐',
          desc: ''
        })

        this.list = data
        this.listLoading = false
      })
    },
    handleDrag() {
      console.log('添加页面')
    }
  }
}
</script>

<style scoped>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
.search-container {
  display: flex;
  justify-content: space-between;
}
.search-wrap {
  flex: 1;
}

.form-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #F1F1F1;
  box-sizing: border-box;
}
.el-select {
  width: 100%;
}

.select-wrap {
  display: flex;
}
.scan-btn {
  margin-left: 10px;
}

.step-wrap {
  margin: 0 auto;
  width: 500px;
}

.detail-title {
  color: #606266;
  font-weight: bold;
  font-size: 14px;
  margin-right: 10px;
}

.detail-content {

  font-size: 14px;
}

.detail-list-container /deep/ .el-dialog__body{
  padding: 0 30px 30px 30px;
}
.base-content {
  padding: 30px 0;
}
</style>
